<template>
  <div class="editor">
    <!-- 容器，放置编辑器 -->
    <div id="editor" style="width: 800px;"></div>

    <!-- 按钮 -->
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import Editor from 'wangeditor'

let editor: any = undefined

onMounted(() => {
  // 创建编辑器实例
  editor = new Editor('#editor')
  editor.config.height = 600
  editor.config.zIndex = -1
  // 挂载到页面
  editor.create()
})

// 获取富文本框中的内容数据
const getContent = () => {
  console.log('内容:', editor.txt.html())
}
</script>

<style lang="scss" scoped>

</style>
